<template>
	<view class="home-container">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.bannerid">
				<image :src="item.img" @click="goToOrder" />
			</swiper-item>
		</swiper>
		<!-- 菜单 -->
		<!-- <uni-grid :column="5" :showBorder="false">
			<uni-grid-item v-for="item in menuList" :key="item.id">
				<view class="grid-item-box">
					<image :src="item.icon" />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid> -->
		<van-grid :column-num="5" :border="false">
			<van-grid-item v-for="item in menuList" :key="item.id" :icon="item.icon" :text="item.title.substr(0,4)" />
		</van-grid>
		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- <navigator :url="'/subpkg/goods-detail/goods-detail?proid='+item.proid" class="goods-item"
				v-for="item in goodsList" :key="item.proid">
				<image :src="item.img1" />
				<view class="title">{{item.proname}}</view>
				<view class="desc">{{item.desc}}</view>
			</navigator> -->

			<view class="goods-item" v-for="item in goodsList" :key="item.proid" @click="goToGoodsDetail(item.proid)">
				<image :src="item.img1" />
				<view class="title">{{item.proname}}</view>
				<view class="desc">{{item.desc}}</view>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="{ contentrefresh: '拼命加载中...'}"></uni-load-more>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { Banner, Menu } from '../../types/home'
	import { getBannerList, getMenuList, getGoodsList } from '../../api/home'
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { Goods } from '../../types/goods'


	import { useTotalCount, useTabBarItemText } from '../../hooks'
	useTotalCount()
	useTabBarItemText()


	// import { onShow } from '@dcloudio/uni-app'
	// import { useCartStore } from '../../stores/cart'
	// const store = useCartStore()
	// onShow(() => {
	// 	uni.setTabBarBadge({
	// 		index: 2,
	// 		text: store.totalCount + ''
	// 	})
	// })

	let count = 1
	const limitNum = 10

	// 模型定义的地方
	const bannerList = ref([] as Banner[])
	const menuList = ref([] as Menu[])
	const goodsList = ref([] as Goods[])
	const status = ref<'loading' | 'noMore'>('loading')

	// 获取轮播图列表
	const getBannerListData = async () => {
		const res = await getBannerList()

		bannerList.value = res.data
	}

	getBannerListData()

	// 获取菜单列表
	const getMenuListData = async () => {
		const res = await getMenuList()

		menuList.value = res.data
	}

	getMenuListData()

	// 分页获取商品列表数据
	const getGoodsListData = async () => {
		const res = await getGoodsList({ count, limitNum })

		// 关闭下拉刷新的状态
		uni.stopPullDownRefresh()

		if (res.data.length === 0) {
			status.value = 'noMore'
			return
		}

		// 回来的数据进行累加
		goodsList.value = [...goodsList.value, ...res.data]
	}

	getGoodsListData()

	// 上拉加载更多
	onReachBottom(() => {
		if (status.value === 'noMore') return
		count++
		getGoodsListData()
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		// 重置
		count = 1
		goodsList.value = []
		status.value = 'loading'

		getGoodsListData()
	})

	// 跳转到商品详情
	const goToGoodsDetail = (proid : string) => {
		uni.navigateTo({
			url: `/subpkg/goods-detail/goods-detail?proid=${proid}`
		})
	}

	const goToOrder = () => {
		uni.navigateTo({
			url: '/subpkg/order/order'
		})
	}
</script>

<script lang="ts">
	export default {
		onLoad() {
			console.log('---onLoad---')
		},
		onReachBottom() {
			console.log('---onReachBottom---')
		}
	}
</script>

<style lang="scss" scoped>
	.home-container {
		swiper {
			width: 750rpx;
			height: 500rpx;

			swiper-item {
				width: 750rpx;
				height: 500rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;

			image {
				margin-top: 20rpx;
				width: 70rpx;
				height: 70rpx;
			}

			text {
				margin-top: 18rpx;
				color: #646566;
				font-size: 28rpx;
				word-break: break-all;
			}
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			box-sizing: border-box;
			width: 100%;
		}

		.goods-item {
			box-sizing: border-box;
			background-color: #fff;
			padding: 5.33333vw;
			border-radius: 1.33333vw;
			display: flex;
			align-items: center;
			width: 48%;
			flex-direction: column;
			margin-top: 1.33333vw;
		}

		.goods-item image {
			width: 26.66667vw;
			height: 32vw;
		}

		.title {
			font-size: 3.73333vw;
			display: inline-block;
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 4vw;
			color: #000;
		}

		.desc {
			font-size: 3.2vw;
			color: #c3c3c3;
			display: inline-block;
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-top: 2.66667vw;
		}

		.price {
			font-size: 3.2vw;
			margin-top: 2.66667vw;
			color: red;
		}

		.footer {
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			color: gray;
			font-size: 14px;
		}
	}
</style>